<script lang="ts" setup>
import { computed, defineAsyncComponent } from 'vue'
import { FeeRulesType } from '@/types/enum'
import { useRouter } from 'vue-router'
import { queryTimeBikeHistoryLocusTabelCol } from '@/api/bike/types/bike'

const router = useRouter()
defineProps<{
  data: queryTimeBikeHistoryLocusTabelCol[]
  loading: boolean
}>()
/** 计费规则 */
const TieredBillingInfo = defineAsyncComponent(
  () => import('@/components/popover/TieredBillingInfo.vue')
)
const changeProductType = computed(() => {
  return (productType: FeeRulesType) => {
    switch (productType) {
      case 'TimeBased':
        return '按时长计费'
      case 'Tiered':
        return '按阶梯计费'
      default:
        return ''
    }
  }
})
/** 骑行总费用 */
const FeeBreakdownInfo = defineAsyncComponent(
  () => import('@/components/popover/FeeBreakdownInfo.vue')
)
/** 用户操作记录 */
// const showUserOperateRecord = (row: any) => {
//   router.push({
//     name: 'TimeRentUserRecord',
//     query: {
//       bikeCode: row.bikeCode,
//       phone: row.phone,
//       orderId: row.orderId,
//       type: ''
//     }
//   })
// }
/** 查看车辆轨迹 */
const seeBikeLocus = (row: any) => {
  router.push({
    name: 'TimeBikeOrderLocus',
    query: {
      bikeId: row.bikeId,
      orderId: row.orderId
    }
  })
}
/** 换电记录 */
const showHdRecord = (row: queryTimeBikeHistoryLocusTabelCol) => {
  router.push({
    name: 'UserHdRecord',
    query: {
      userId: row.userId,
      orderId: row.orderId
    }
  })
}
const emits = defineEmits(['open-operate'])
const openMoneyOperateDialog = (row: queryTimeBikeHistoryLocusTabelCol) => {
  emits('open-operate', row)
}
</script>

<template>
  <el-table :data="data" v-loading="loading" class="no-border">
    <el-table-column prop="bikeCode" label="车辆编号" fixed="left" min-width="100" align="center" />
    <el-table-column
      prop="orderId"
      label="行程编号"
      width="200"
      show-overflow-tooltip
      fixed="left"
      align="center"
    />
    <el-table-column prop="phone" label="手机号" min-width="150" align="center" />
    <el-table-column prop="startTime" label="开始时间" min-width="250" align="center" />
    <el-table-column prop="endTime" label="结束时间" min-width="250" align="center" />
    <el-table-column prop="rideDuration" label="骑行时长" min-width="120" align="center" />
    <el-table-column prop="rideAmount" label="骑行总费用" min-width="120" align="center">
      <template #default="scope">
        <el-popover
          placement="bottom"
          width="auto"
          trigger="click"
          v-if="
            JSON.stringify(scope.row.tradeExtensionData) !== '{}' && scope.row.tradeExtensionData
          "
        >
          <template #reference>
            <span class="cursor-pointer">{{ scope.row.rideAmount }}</span>
          </template>
          <template #default>
            <fee-breakdown-info :data="scope.row.tradeExtensionData" />
          </template>
        </el-popover>
        <span v-else>{{ scope.row.rideAmount }}</span>
      </template>
    </el-table-column>
    <el-table-column label="计费规则" prop="feeRules" min-width="130" align="center">
      <template #default="scope">
        <el-popover
          placement="bottom"
          trigger="hover"
          popper-class="tiered-billing-popover"
          width="auto"
        >
          <template #reference>
            <span class="cursor-pointer is-reference">{{
              changeProductType(scope.row.productType)
            }}</span>
          </template>
          <template #default>
            <tiered-billing-info
              :title="changeProductType(scope.row.productType)"
              :data="scope.row.feeRules"
            />
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- <el-table-column label="用户操作记录" fixed="right" align="center">
      <template #default="scope">
        <el-button type="primary" link @click="showUserOperateRecord(scope.row)">查看</el-button>
      </template>
    </el-table-column> -->
    <el-table-column label="骑行轨迹" fixed="right" align="center">
      <template #default="scope">
        <el-button link type="primary" class="is-show" @click="seeBikeLocus(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="换电记录" fixed="right" align="center">
      <template #default="scope">
        <el-button link class="is-show" type="primary" @click="showHdRecord(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" align="center">
      <template #default="scope">
        <el-button
          type="primary"
          link
          class="is-open"
          @click="openMoneyOperateDialog(scope.row)"
          v-if="scope.row.endTime"
          >收/退费</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
